import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./style.css";

class Loading extends Component {
    constructor(props) {
        super(props);
        this.container = document.createComment("div");
        document.body.appendChild(this.container);
    }

    componentWillUnmount() {
        document.body.removeChild(this.container)
    }

    render() {
        // React 16的Portals特性让我们可以把组件渲染到当前组件树以外的DOM节点上， 这个特性典型的应用场景是渲染应用的全局弹框，
        // 使用Portals后， 任意组件都可以将弹框组件渲染到根节点上， 以方便弹框的显示。
        // 创建的DOM树挂载到this.container指向的div节点下面
        return ReactDOM.createPortal(
            <div className="loading">
                <span />
                <span />
                <span />
                <span />
                <span />
                <span />
                <span />
                <span />
            </div>,
            this.container
        )
    }
}
export default Loading;